<template>
	<view class="recycle_price-container">
		<!-- Header -->
		<view class="recycle-header">
			<view class="recycle-header-content">
				<view class="recycle-price-title">您的商品预估价值:</view>
				<view class="recycle-price"><text style="font-size: 44rpx;">¥</text>{{ orderInfo.pt_money || '0.00' }}
				</view>
			</view>
		</view>

		<!-- Main -->
		<view class="recycle_price-main">
			<template>
				<view class="recycle-process-title">商品估价</view>
			</template>

			<view class="image-content">
				<view class="video-box" v-for="(v,i) in orderInfo.abs_image.video" :key="i">
					<video :src="v" class="video"></video>
				</view>
				<image v-for="(v,i) in orderInfo.abs_image.img" :key="i" :src="v" mode="aspectFill" class="img">
				</image>
			</view>
		</view>
		<text class="desc">
			*对方收到商品，质检通过后将会打款至您的账户余额
		</text>

		<!-- Widget -->
		<view class="recycle_price-widget">
			<view class="recycle_price-btn--goorder" @tap="goPlaceOrder">
				确认/寄出商品
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postGujia, //确定估价
		getQuHuanDetail
	} from '@/api/recycle.js';

	export default {
		data() {
			return {
				orderInfo: null,
			}
		},

		methods: {
			// 去下单
			goPlaceOrder() {
				if (this.orderInfo.status == 0) {
					return this.$toast({
						title: '请等待估价'
					});
				}

				postGujia({
					id: this.orderInfo.id
				}).then(res => {
					if (res.code != 1) return this.$toast({
						title: res.msg
					});
					uni.redirectTo({
						url: '/bundle/pages/recycle_order/recycle_order?id=' + this.orderInfo.id
					})
				});
			}
		},

		onLoad(options) {
			this.orderid = options.id
			getQuHuanDetail({
				id: options.orderid
			}).then(res => {
				if (res.code != 1) return this.$toast({
					title: res.msg
				})
				this.orderInfo = res.data;
			});
		}
	}
</script>

<style scoped>
	.recycle-header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		padding: 30rpx;
		background: url(../../static/images/huishou_price_banner.png) no-repeat;
		background-size: 100% 100%;
	}

	.recycle-header-content {
		position: relative;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
	}

	.recycle-price-title {
		font-size: 34rpx;
	}

	.recycle-price {
		font-size: 80rpx;
		margin-top: 20rpx;
	}

	.recycle-price--reprice {
		position: absolute;
		right: 0;
		bottom: 1em;
		font-size: 26rpx;
	}

	.recycle_price-main {
		padding: 40rpx;
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	.recycle-process-title {
		padding-bottom: 20rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.recycle-process {
		position: relative;
		width: 100%;
		height: 76rpx;
		display: flex;
		justify-content: space-between;
		background: url(../../static/images/huishou_step.png) no-repeat;
		background-size: 100% 100%;
	}

	.lendlease-process-title {
		height: 50rpx;
		background: url(../../static/images/huanzu_title.png) no-repeat;
		background-size: contain;
		background-position: center;
	}


	.lendlease-process-item {
		display: flex;
		margin-top: 20rpx;
	}

	.lendlease-process-item-l {
		width: 65rpx;
		margin-right: 20rpx;
	}

	.lendlease-process-item-count {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 58rpx;
		font-size: 32rpx;
		font-weight: 500;
		background: url(../../static/images/huanzu_icon_step1.png) no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
	}

	.lendlease-process-item-tranf {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.lendlease-process-item-title {
		height: 58rpx;
		line-height: 58rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.lendlease-process-item-desc {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}


	.recycle_price-widget {
		margin: 40rpx 30rpx 30rpx 30rpx;
	}

	.recycle_price-btn--goorder {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		border-radius: 50px;
		font-size: 34rpx;
		color: #FFFFFF;
		background-image: linear-gradient(to left, #3187FD, #24A3FF);
	}

	.image-content {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
	}

	.image-content .video-box {
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
		overflow: hidden;
		position: relative;
		margin-right: 15rpx;
	}

	.image-content .video-box .video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.image-content .img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
		margin-right: 15rpx;
	}

	.desc {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
		margin-top: 32rpx;
		padding: 0 28rpx;
		display: inline-block;
	}
</style>